<template>
    <div id="wrap">

      <!--头部-->
      <div class="top">
        <img @click="goback()"  src="../../../static/bmqd/BMQD-1.png" alt="">
        <p>消息中心</p>
        <p></p>
      </div>

      <div>
        <p class="title">2017年06月20日10:44</p>
        <div class="info">
          <p class="info-top">新品推荐</p>
          <div class="info-con">
            <div class="info-con-l">
              <img src="../../../static/xiaoxi/xx-1.png" />
            </div>
            <p class="info-con-r">新品上市啦！时间不多了，赶紧行动起 来吧！</p>
          </div>
          <p class="info-bot"><span>查看更多</span> ></p>
        </div>
      </div>

      <div>
        <p class="title">2017年06月20日10:44</p>
        <div class="info">
          <p class="info-top">新品推荐</p>
          <div class="info-con">
            <div class="info-con-l">
              <img src="../../../static/xiaoxi/xx-1.png" />
            </div>
            <p class="info-con-r">近期有不法分子冒充阿拉灯客服进行诈 骗，请认准阿拉灯官方客服电话 4000123456
            </p>
          </div>
        </div>
      </div>
      <div>
        <p class="title">2017年06月20日10:44</p>
        <div class="info">
          <p class="info-top">新品推荐</p>
          <div class="info-con">
            <div class="info-con-l">
              <img src="../../../static/xiaoxi/xx-1.png" />
            </div>
            <p class="info-con-r">你的货物到站了，请注意查收哦~</p>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
      name: "Info",
      data(){
          return{
            arr:[
              {time:'2017年06月20日10:44',tit:'新品推荐',url:require('../../../static/xiaoxi/xx-1.png'),text:'新品上市啦！时间不多了，赶紧行动起 来吧！',more:'查看更多',jt:'>'},
              {time:'2017年06月20日11:12',tit:'安全提醒',url:require('../../../static/xiaoxi/xx-2.png'),text:'新品上市啦！时间不多了，赶紧行动起 来吧！'},
              {time:'2017年06月20日11:12',tit:'收货啦',url:require('../../../static/xiaoxi/xx-3.png'),text:'新品上市啦！时间不多了，赶紧行动起 来吧！'},
            ]
          }
      },
      methods:{
        goback(){
          history.go(-1);
        }
      }
    }
</script>

<style scoped>
  #wrap{
    background: #fff;
  }
  .top{
    width: 69rem;
    height: 3rem;
    line-height: 3rem;
    padding: 3.5rem 1.5rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .top p{
    font-size: 3.6rem;
    color: #fff;
  }
  .top img{
    width: 3rem;
    height: 3rem;
  }
  .title{
    width: 70rem;
    height: 8rem;
    line-height: 8rem;
    /*background: #f2f2f2;*/
    font-size: 3rem;
    color: #4d4d4d;
    padding-left: 2rem;
    text-align: center;
  }
  .info{
    width: 68rem;
    /*height: 32rem;*/
    margin: 0 auto;
    border: .1rem solid #ccc;
    border-radius: 1rem;
    background: #fff;
  }
  .info-top{
    width: 66rem;
    padding: 2rem 1rem;
    color: #4d4d4d;
    font-size: 3rem;
  }
  .info-con{
    width: 65rem;
    height: 13rem;
    margin: 0 auto 2rem;
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;

  }
  .info-con-l{
    width: 13rem;
    height: 100%;
  }
  .info-con-l img{
    width: 100%;
    height: 100%;
  }
  .info-con-r{
    width: 48rem;
    height: 100%;
    font-size: 2.8rem;
    color: #808080;
  }
  .info-bot{
    width: 65rem;
    height: 8rem;
    line-height: 8rem;
    margin: 0 auto;
    font-size: 2.8rem;
    color: #808080;
    display: flex;
    justify-content: space-between;
    border-top: .1rem solid #ccc;
  }

</style>
